<!--
查看更多下拉组件
title：标题
height: 隐藏时的默认高度
默认插槽：内容
-->
<template>
  <div class="container">
    <div class="header">
      {{title}}
    </div>
    <div class="main" :style="'height:'+ready_height+'px'">
      <div ref="content">
        <slot></slot>
      </div>
    </div>
    <div class="bottom" @click="show_more">
      {{show?'隐藏':'查看更多'}}
    </div>
  </div>
</template>
<style lang="less" scoped>
  @import url('../../style/mixin.less');
  @import url('./theme.less');
  .container {
    width: 100%;
    .header {
      width: 100%;
      height: @header-height;
      background: @header-background-color;
      text-align: @header-text-align;
      line-height: @header-height;
      font-size: @header-font-size;
    }
    .main {
      overflow: hidden;
      width: 100%;
      background: @main-background-color;
      .transition(.5s);
      p {
        margin: 0;
      }
    }
    .bottom {
      height: @bottom-height;
      width: 100%;
      background: @bottom-background-color;
      font-size: @bottom-font-size;
      text-align: @bottom-text-align;
      line-height: @bottom-height;
    }
  }

</style>
<script>
  export default {
    data() {
      return {
        show_height: 0,
        show: false
      }
    },
    mounted: function () {
      this.show_height = this.$refs.content.offsetHeight;
    },
    computed: {
      ready_height: function () {
        return this.show ? this.show_height : this.height;
      }
    },
    props: {
      height: {
        default: 50
      },
      title: {
          default: '下拉的标题'
      }
    },
    methods: {
      show_more() {
        this.show = !this.show;
      }
    }
  }
</script>
